<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box{text-align:center; } 
        #boss{text-align: center; border-bottom: 1.5px solid #666; width: 100%; }
    </style>
</head>
<body>
    <div class="bo"></div>
    <div id="box">
        <h3>留言板</h3>
        标题： <input type="text" id="txt"><br/><br/>
        内容：<textarea name="" id="content" cols="30" rows="10"></textarea><br/>
        发布：<button id="btn">发布</button>

    </div>
    <script>
        
        window.onload=function (){
            document.getElementById("btn").addEventListener('click',function (){
                var title = document.getElementById("txt").value,
                    content = document.getElementById("content").value,
                    sj = getNowTime();
                var obj = {  //储存输入框里的值
                    title : title,
                    con : content,
                    time : sj
                }
                setkzt(obj) //应用中
                getlist()
            })
            getlist()//刷新页面
        }
        function setkzt(obj){ //先将值储存到应用里面 
            if(!localStorage.getItem('lylist')){
            localStorage.setItem('lylist', JSON.stringify([obj])) //若为空，则创建
            }else{
            var data =JSON.parse(localStorage.getItem('lylist')) //不为空，则获取转为数组
            data.push(obj) //再添加
            localStorage.setItem('lylist', JSON.stringify(data)) //创建到应用
            }
        }
        function getlist(){ //然后渲染到页面
            if(!localStorage.getItem('lylist')){
                return
            }
                var ym =JSON.parse(localStorage.getItem('lylist'))
                var str = "" 
                for (let i in ym) { 
                    str += `
                    <div id="boss">
                        <h3>留言板</h3>
                        <div>${ym[i].title}</div><br/>
                        <div>${ym[i].con}</div><br/>
                        <div>${ym[i].time}&emsp;<button onclick=del(${i})>删除</button></div>
                    </div>        
                
                    `
                }
                document.getElementsByClassName('bo')[0].innerHTML = str
            

        }
        function del(index){
            var data = JSON.parse(localStorage.getItem('lylist'))
            data.splice(index,1)
            localStorage.setItem('lylist',JSON.stringify(data))
            getlist()
        }
        
        function getNowTime() {
        var dtime = new Date();
        var nian = dtime.getFullYear(),
            yue = dtime.getMonth() + 1,
            day = dtime.getDate(),
            hours = dtime.getHours(),
            fen = dtime.getMinutes(),
            miao = dtime.getSeconds()
        return nian + "-" + yue + "-" + day + " " + hours + ":" + fen + ":" + miao
    }
    </script>
</body>
</html>